import siteHeader from "./siteHeader.js";
import backTop    from "./backTop.js";
//用于用户名密码等验证
function Register(){}

$.extend(Register.prototype , {
    init : function(){
        console.log("i am register");
        this.form           = $(".form-horizontal");
        this.login_name     = $("#input_login_name");
        this.login_password = $("#input_login_password");
        this.input_confirm  = $("#input_psw_confirm");
        this.input_vcode    = $("#input_vcode");
        this.btn            = $("#btn");
        this.random_code    = $(".random-code"); 
        this.form_group     = $(".form-group");
        //验证码
        this.btn_link       = $(".btn-link");
        //立即登陆
        this.btn_danger     = $(".btn-danger");

        //不允许为纯数字
        this.num_user       = $("#num_user");
        this.email_error    = $("#email_error");
        this.input_user     = $("#input_user");    
        this.user_error     = $("#user_error");
        this.pwd_error      = $("#pwd_error");
        this.psw_error      = $("#psw_error");
        this.alert_danger   = $(".alert-danger");
        //绑定事件
        this.form.on("blur",".col-md-9",$.proxy(this.checkIng,this));
        this.form.on("focus",".col-md-9",$.proxy(this.clearCheckIng,this));
        
        this.btn_link.on("click",$.proxy(this.randomVerCode,this));
        this.btn.on("click"  ,$.proxy(this.checkRandomVerCode,this));
        this.form.on("submit",$.proxy(this.submitForm,this));   
        
        //跳转到登录页面
        this.btn_danger.on("click",$.proxy(this.goBackLogin,this));
        siteHeader.init();
        backTop.init();  
    },
    clearCheckIng : function(evt){
        var e = evt || window.event;
        var target = e.target || e.srcElement;
        if($(target).attr("id") === "input_login_name"){
            this.num_user.css("display","none");
            this.email_error.css("display","none");
            this.input_user.css("display","none");        
            this.user_error.css("display","none");          
        }
        if($(target).attr("id") === "input_login_password"){
            this.pwd_error.css("display","none");
        }
        if($(target).attr("id") === "input_psw_confirm"){
            this.psw_error.css("display","none");
        }
        this.alert_danger.css("display","none");
    },
    checkIng : function(evt){
        var e = evt || window.event;
        var target = e.target || e.srcElement;
        var iptValue = $(target).val();

        var $target = $(target).closest(".form-group");
        
        if($(target).attr("id") === "input_login_name"){

            var user_flag = this.strengthList.username.reg.test(iptValue);
            var email_flag = this.strengthList.email.reg.test(iptValue);

            if(iptValue === ""){
                //输入为空
                $target.addClass("has-error");
                this.input_user.css("display","block");
            }else{
                if(user_flag === true && email_flag === false ){
                    if(/^\d+$/.test(iptValue)){
                        //用户名是纯数字
                        $target.addClass("has-error");
                        this.num_user.css("display","block");
                    }else{
                        //用户名验证通过
                        $target.addClass("has-success");
                        $target.removeClass("has-error");
                    }
                }else if (user_flag === false && email_flag === true){
                    //邮箱验证成功    
                    $target.addClass("has-success");
                    $target.removeClass("has-error");
                }else{
                    //判断是邮箱出错还是用户名出错
                    if(/@/.test(iptValue)){
                        //邮箱出错
                        $target.addClass("has-error");
                        this.email_error.css("display","block");
                    }else{
                        //用户名出错
                        $target.addClass("has-error");
                        this.user_error.css("display","block");
                    }
                }
            }

        }
        if($(target).attr("id") === "input_login_password"){

            if(iptValue === "") return false;
            if(this.strengthList.password.reg.test(iptValue)){

                $target.addClass("has-success");
                $target.removeClass("has-error");               
            }else{   
                $target.addClass("has-error");
                this.pwd_error.css("display","block");     
            }
        }
        if($(target).attr("id") === "input_psw_confirm"){
            var value = $target.prev().find("#input_login_password").val();
            if(value === "") return false;
            if(value === iptValue){
                $target.addClass("has-success");
                $target.removeClass("has-error");
            }else{
                $target.removeClass("has-error");
                this.psw_error.css("display","block");
            }
        }      
    },
    randomVerCode : function(){
        var arrayTest= ["m","n","v","x","z","a","b","c","d","e","f","g","h","j","k","l","q","w","r","t","y","u","i","i","o","p",1,2,3,4,5,6,7,8,9,0];
        var str = "";
        for(var i=0;i<4;i++){
            //parseInt()函数将Math.random()函数中随机出的值乘以数组的长度,它的值的范围就是0——Array.length-1,此时取出的值为数组的下标.
            var num = parseInt(Math.random()*arrayTest.length);
    　　　　 //将arrayTest中的值取出,利用上面取出的下标num,此时取出的值为数组中真正的值,而不是它的下标
            var code = arrayTest[num];
            str += code;
    　　　　 //将上面取到的<span>元素通过innerHTML赋值code      
            $(this.random_code[i]).html(code);
    　　　　 //将随机出的值通过style.color赋予颜色,这里使用了自己写的一个封装函数randomColor()，
            $(this.random_code[i]).css("color",this.randomColor());
　　　   }
        this.form.attr("random-code",str);
    },
    randomColor : function(){
        var r = Math.round(Math.random()*255); 
        var g = Math.round(Math.random()*255); 
        var b = Math.round(Math.random()*255); 
        return `rgb(${r},${g},${b})`;
    },
    checkRandomVerCode : function(evt){
        var e = evt || window.event;
        var code = this.form.attr("random-code");    
        for(var i = 0 ; i <= 2 ; i++){
            if(!$(this.form_group[i]).hasClass("has-success")){
                console.log("验证不通过");
                return false;
            }
        }
        if(code !== this.input_vcode.val() && this.input_vcode.val() !== ""){
            console.log("验证码不通过");
            this.alert_danger.css("display","block");       
        }else{
            this.alert_danger.css("display","none");
            console.log("验证码通过");
            this.submitData();
        }              
    },
    submitData : function(){
        var userValue = this.login_name.val();
        var pwdValue  = this.login_password.val();
        // console.log(userValue,pwdValue);
        this.btn.attr("disabled","disabled");
        this.btn.html(this.btn.attr("data-loading-text"));
        
        var url = "http://localhost/js/test/konka/php/register.php";
        var data = {
            username : userValue,
            password : pwdValue
        }
        $.ajax(url,{
            data,
            type : "POST",
            dataType : "json"
        })
        .then($.proxy(function(res){
            console.log(res);
            switch(res.stateCode){
                case 0 : 
                    alert("服务器连接出错");
                    break;
                case 2 : 
                    alert("用户名已存在");
                    break;
                case 3 :
                    alert("注册出现未知错误");
                    break;
                case 1 :
                    alert("注册成功");
                    break;
            }

            this.btn.attr("disabled",false);
            this.btn.html("注册");

        },this));
    },
    submitForm : function(evt){
        var e = evt || window.event;
        e.preventDefault();
    },
    goBackLogin : function(){
        location.href = "http://localhost/js/test/konka/html/login.html";
    },
    strengthList : {
        "email" : {
            reg : /^[0-9a-z]\w{5,19}@[0-9a-z]{2,10}\.(com|net|cn)$/i
        },
        "username":{
            reg :/^[0-9a-z\u4e00-\u9fa5_\-]{5,20}$/i
        },
        "password":{
            reg :/^[\!\@\#\$\%\^\&\*\(\)0-9a-z]{6,20}$/i
        }
    }
})

export default new Register();